<template>
  <div id="PYZ">
    <Navigator></Navigator>
    <section class="VueView">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component"></component>
        </keep-alive>
      </router-view>
    </section>
    <Footer></Footer>
  </div>
</template>

<script setup>
import Footer from "@/components/App/Footer.vue";
</script>

<style lang="less">
:root {
  /* 公用部分 */
  --body-color: #e4e9f7;
  --primary-color: #695cfe;
  --main-blue: #007aff;
  --bili-pink: #fb7299;
  --transition: 0.3s;
  --transition-shorter: 0.15s;
  /* dark */
  --bg-color: #18171d;
  --navigator-bg: #1e1e1e;
  --navigator-border: #3d3d3f;
  --navigator-icon: #f7f7fa;
  --text: #f7f7fa;
  --text-hover: #fff;
  --module-bg: #1e1e1e;
  --module-border: #3d3d3f;
  --text-a: #f7f7fa;
  --text-a-hover: #f2b94b;
  --footer-bg: #30343f;
  --module-a: #30343f;
  --text-b: #f7f7fa;
}

#PYZ {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--text);
  overflow-x: hidden;
  font-style: normal;

  section.spcial-container {
    width: 90%;
    margin: 70px auto 0 auto;
  }

  section.VueView {
    width: 70%;
    min-height: 100vh;
    margin: 70px auto 0 auto;
  }
}

::selection {
  background-color: var(--primary-color);
  color: #fff;
}

@media screen and (max-width: 900px) {
  section.VueView {
    width: 97% !important;
    margin: 17px auto 0 auto !important;
  }
}
</style>
